<template lang="pug">
  .CreateBasicDataModal
    Modal(
      v-model="isShowCreateBasicDataModal"
      :title="createBasicDataModalTitle"
      class-name="vertical-center-modal"
      width="680"
    )
      Form.ivu-row(ref="formCreate" :model="formCreate" :rules="rules" :label-width="100")
        FormItem.form-item.ivu-col(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-show="item.isShow")
          template(v-if="item.type === 'text'")
            .line-h-30 {{formCreate[item.model]}}
          template(v-if="item.type === 'input'")
            Input(v-model="formCreate[item.model]" :placeholder="item.placeholder")
          template(v-if="item.type === 'select'")
            Select(v-if="item.model === 'typeGUID'" v-model="formCreate[item.model]" :placeholder="item.placeholder" @on-change="listenCall(item.fn, formCreate[item.model])")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.key") {{c_item.value}}
            Select(v-else v-model="formCreate[item.model]" :placeholder="item.placeholder" @on-change="listenCall(item.fn, formCreate[item.model])")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.text}}
          template(v-if="item.type === 'switch'")
            i-switch(v-model="formCreate[item.model]")
          template(v-if="item.type === 'radio'")
            RadioGroup.top-3-fu.relative(v-model="formCreate[item.model]")
              Radio.display-inline-block(v-for="(c_item, index) of item.radioArr" :key="index" :label="c_item.value") {{c_item.label}}
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSave(false)") 保存

    Modal(
      v-model="isShowFurtherModal"
      class-name="vertical-center-modal"
      width="480"
      @on-ok="handleSave(true)"
    )
      p.font-16.text-center.pt-20.pb-20 是否更新所有下级节点的基础数据类型？
</template>

<script>
import { Common } from '@/utils/common.js'
import { SysBasedataApi } from '@/api/SysBasedata.api.js'
export default {
  name: 'CreateBasicDataModal',

  watch: {
  },

  computed: {
    setFormItem () {
      if (this.isPlanClassify) {
        this.formItem[5].isShow = true
        this.formItem[6].isShow = true
      } else {
        this.formItem[5].isShow = false
        this.formItem[6].isShow = false
      }
      return this.formItem
    }
  },

  data () {
    return {
      isShowCreateBasicDataModal: false,
      isShowFurtherModal: false,
      createBasicDataModalTitle: '',
      basicDataId: '',
      // basicTypeId: '',
      formCreate: {
        typeGUID: '',
        parentGUID: '',
        name: '',
        value: '',
        sortID: 0,
        isDefault: false,
        enabled: true,
        planComplete: 'true',
        planCustomer: 'true',
        extendList: []
      },
      formItem: [
        { type: 'select', label: '数据类型', placeholder: '请选择数据类型', prop: 'typeGUID', model: 'typeGUID', style: 'ivu-col-span-12', options: 'typeList', fn: 'handleTypeChange', isShow: true },
        { type: 'select', label: '父节点', placeholder: '请选择父节点', prop: 'parentGUID', model: 'parentGUID', style: 'ivu-col-span-12', options: 'parentList', fn: 'handleParentTypeChange', isShow: true },
        { type: 'input', label: '数据名称', placeholder: '请输入数据名称', prop: 'name', model: 'name', style: 'ivu-col-span-12', isShow: true },
        { type: 'input', label: '值', placeholder: '请输入值', prop: 'value', model: 'value', style: 'ivu-col-span-12', isShow: true },
        { type: 'select', label: '排序', placeholder: '请选择排序', prop: 'sortID', model: 'sortID', style: 'ivu-col-span-12', options: 'orderList', fn: 'selectChange', isShow: true },
        { type: 'radio', label: '客户必填', placeholder: '', prop: 'planCustomer', model: 'planCustomer', style: 'ivu-col-span-12', radioArr: [{ value: 'true', label: '是' }, { value: 'false', label: '否' }], isShow: true },
        { type: 'radio', label: '确认完成', placeholder: '', prop: 'planComplete', model: 'planComplete', style: 'ivu-col-span-12', radioArr: [{ value: 'true', label: '是' }, { value: 'false', label: '否' }], isShow: true },
        // { type: 'switch', label: '客户必填', placeholder: '', prop: 'planComplete', model: 'planComplete', style: 'ivu-col-span-12', isShow: true },
        // { type: 'switch', label: '确认完成', placeholder: '', prop: 'planCustomer', model: 'planCustomer', style: 'ivu-col-span-12', isShow: true },
        { type: 'switch', label: '默认值', placeholder: '', prop: 'isDefault', model: 'isDefault', style: 'ivu-col-span-12', isShow: true },
        { type: 'switch', label: '启用', placeholder: '', prop: 'enabled', model: 'enabled', style: 'ivu-col-span-24', isShow: true }
      ],
      rules: {
        typeGUID: [
          { required: true, message: '请选择数据类型', trigger: 'select' }
        ],
        name: [
          { required: true, message: '请输入数据名称', trigger: 'select' }
        ]
        // enabled: [
        //   { required: true, message: '请选择是否启用', trigger: 'select' }
        // ]
      },
      arrListDown: {
        typeList: [],
        parentList: [],
        orderList: []
      },
      isPlanClassify: false
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, param) {
      this[methodsWords](param)
    },

    cancel () {
      this.isShowCreateBasicDataModal = false
    },

    show () {
      this.isShowCreateBasicDataModal = true
      this.$refs.formCreate.resetFields()
    },

    // 根据ID获取基础数据
    async getModel (id) {
      let res = await SysBasedataApi.getModel(id)
      this.isPlanClassify = res.data.data.isPlanClassify
      console.log('根据ID获取基础数据: ', res)
      Object.keys(res.data.data).forEach(key => {
        this.arrListDown[key] = res.data.data[key]
      })
      if (id) {
        Object.keys(res.data.data.detail).forEach(key => {
          this.formCreate[key] = res.data.data.detail[key]
        })
      }
      if (res.data.data.detail.extendList) {
        var extendList = res.data.data.detail.extendList
        this.formCreate.planComplete = extendList.PlanComplete
        this.formCreate.planCustomer = extendList.PlanCustomer
      }
    },

    // 基础数据类型改变
    async typeChange (params) {
      let res = await SysBasedataApi.typeChange(params)
      this.isPlanClassify = res.data.data.isPlanClassify
      console.log('基础数据类型改变: ', res)
      this.formCreate.sortID = res.data.data.sortID
      if (res.status === 200 && res.data.success) {
        Object.keys(res.data.data).forEach(key => {
          this.arrListDown[key] = res.data.data[key]
        })
      }
    },

    // 数据类型改变
    handleTypeChange (value) {
      this.basicTypeId = value
      var params = {}
      this.arrListDown.typeList.map(item => {
        if (item.key === value) {
          params.id = this.basicDataId
          params.TypeGUID = item.key
          this.typeChange(params)
        }
      })
    },

    // 父节点数据类型改变
    handleParentTypeChange (value) {
      var params = {}
      this.arrListDown.parentList.map(item => {
        if (item.value === value) {
          params.id = this.basicDataId // rowID
          params.typeGUID = this.formCreate.typeGUID //数据类型ID
          params.parentGUID = value // 父节点ID
          SysBasedataApi.parentChange(params).then(res=>{
            if (res.status === 200 && res.data.success) {
              this.arrListDown.orderList = res.data.data.orderList
            }
          })
        }
      })
    },

    selectChange (value) {
      console.log('value: ', value)
    },

    // 保存基础数据
    handleSave (updateChildsTypeId) {
      this.formCreate.extendList = {PlanComplete: this.formCreate.planComplete, PlanCustomer: this.formCreate.planCustomer}
      console.log('保存基础数据：', this.formCreate)
      var tempObj = { updateChildsTypeId: updateChildsTypeId }
      this.$refs.formCreate.validate((valid) => {
        if (valid) {
          SysBasedataApi.save({ ...this.formCreate, ...tempObj }).then(res => {
            // console.log('保存基础数据res: ', res)
            if (res.status === 200 && res.data.success) {
              this.$Message.success(res.data.message)
              this.isShowCreateBasicDataModal = false
              this.$emit('handleSave')
            } else {
              if (res.data.code === 'UpdateChildsTypeId') {
                this.isShowFurtherModal = true
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 10,
                  closable: true
                })
              }
            }
          })
        } else {
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
